import { onMounted, ref, watch } from 'vue'
import { defineStore } from 'pinia'
import { app } from '@/main'
import { deleteUser, getUser, registerAll, changeUser, offline } from '@/request/index.js'
import { useMapgisStore_hjh } from '@/stores/mapgis-hjh.js'
export const useMapgisStore_zxh = defineStore('mapgis_zxh', () => {
  // onMounted(() => {
  //   // 注册控件
  //   app.config.globalProperties.$map.addControl(navControl)
  //   app.config.globalProperties.$map.addControl(zoomSlider)
  //   app.config.globalProperties.$map.addControl(mousePositionControl)
  //   app.config.globalProperties.$map.addControl(scaleLineControl)
  //   app.config.globalProperties.$map.addControl(fullScreenControl)
  //   app.config.globalProperties.$map.addControl(overviewMapControl)

  //   // 漫游
  //   app.config.globalProperties.$map.on("click", evt => {
  //     let center = evt.coordinate;
  //     // console.log(center);
  //     /* 2、操作视图,飞行到对应的坐标 */
  //     let view = app.config.globalProperties.$map.getView();
  //     view.animate({
  //       center,
  //       zoom: 12,
  //       /* 设置漫游的时长 */
  //       // duration: 3000
  //     })
  //   })
  // })

  // // 重置地图按钮
  // const resetMap = () => {
  //   app.config.globalProperties.$map.getView().animate({
  //     center: [114.3, 30.5],
  //     zoom: 12,
  //     duration: 500,
  //   })
  // }

  // /* 控件 */
  // // 1.导航控件
  // const navControl = new ol.control.ZoomToExtent({
  //   extent: [113.5, 29.5, 114.8, 30.8],
  // })
  // // 2.缩放控件
  // const zoomSlider = new ol.control.ZoomSlider();
  // // 3.鼠标显示坐标值控件
  // const mousePositionControl = new ol.control.MousePosition({
  //   /* 坐标格式 */
  //   coordinateFormat: ol.coordinate.createStringXY(4),
  //   projection: 'EPSG:4326',
  //   /* 坐标信息显示样式类名,默认是'ol-mouse-position' */
  //   // className: 'custom-mouse-position',
  //   target: document.getElementById('mouse-position'),
  //   undefinedHTML: '&nbsp'
  // })
  // // 4.比例尺控件
  // const scaleLineControl = new ol.control.ScaleLine({
  //   units: 'metric'
  // })
  // // 5.全屏控件
  // const fullScreenControl = new ol.control.FullScreen();
  // // 6.鹰眼控件
  // const overviewMapControl = new ol.control.OverviewMap({
  //   className: 'ol-overviewmap ol-custom-overviewmap',
  //   /* layers: [
  //     new ol.layer.Tile({
  //       source: new ol.source.OSM(),
  //     }),
  //   ], */
  //   collapseLabel: '\u00BB',
  //   label: '\u00AB',
  //   collapsed: false,
  //   view: new ol.View({
  //     projection: 'EPSG:4326',
  //     minZoom: 8,
  //     maxZoom: 18
  //   })
  // })

  /* 超管--管理用户 */
  const showManageUser = ref(false)
  const showAddUserByAdmin = ref(false)
  const username = ref('')
  const password = ref('')
  const type = ref('')
  const searchUser = ref('')
  const tableData = ref([]) //第一(当前)页的用户数据
  const totalData = ref([]) //所有的用户数据
  const pageSize = ref(5) //每页显示的条数
  const page = ref(1) //当前页码
  const isShowOffline = ref(false) //是否显示下线按钮
  const showChangeUserByAdmin = ref(false) //是否显示修改用户弹窗
  const changeUsername = ref('')
  const changePassword = ref('')
  const oldUsername = ref('')

  // 获取所有用户列表
  const manageUser = () => {
    showManageUser.value = !showManageUser.value
    // 获取用户列表
    getUser().then(res => {
      // 所有的用户列表
      totalData.value = res.result
      // 第一页(当前)的用户列表
      tableData.value = totalData.value.slice(0, 5)
      // console.log(totalData.value.length)
      // console.log(tableData.value.length)
    })
  }

  // 分页器切换页码时的逻辑
  function handleCurrentChange(nowPage) {
    page.value = nowPage
    tableData.value = totalData.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)
  }

  // 新增的逻辑
  const showAddUser = () => {
    showAddUserByAdmin.value = !showAddUserByAdmin.value
  }
  const addUser = async ({ username, password, type }) => {
    if (username && password && type) {
      if (totalData.value.some(item => item.username === username)) {
        alert('用户名已存在')
      } else {
        console.log(username, password, type)
        await registerAll(
          {
            username,
            password,
            type
          }
        )
        showAddUserByAdmin.value = !showAddUserByAdmin.value
        // 更新用户列表
        const res = await getUser()
        console.log(res.result)
        totalData.value = res.result
        tableData.value = totalData.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)
        console.log('to', totalData.value)
        console.log('ta', tableData.value)
        alert('新增用户成功')
      }
    } else {
      alert('用户名、密码、类型不能为空')
    }
  }

  // 搜索的逻辑
  watch(
    searchUser,
    () => {
      // searchUser.value = newVal
      if (searchUser.value) {
        totalData.value = totalData.value.filter((item) => {
          return item.username.includes(searchUser.value)
        })
        tableData.value = totalData.value.slice(0, 5)
      } else {
        getUser().then(res => {
          console.log(res.result)
          totalData.value = res.result
          tableData.value = totalData.value.slice(0, 5)
        })
      }
    },
  )

  // 删除的逻辑
  const deleteTheUser = (
    {
      username,
      type
    }
  ) => {
    console.log(username, type)
    deleteUser(
      {
        username,
        type
      }
    )
    totalData.value = totalData.value.filter(item => item.username !== username)

    tableData.value = totalData.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value)
    // console.log(username, type)
    // console.log(totalData.value)
  }

  // 修改的逻辑
  const showChangeUser = ({ username }) => {
    showChangeUserByAdmin.value = !showChangeUserByAdmin.value
    // console.log('111',username)
    oldUsername.value = username
  }
  const changeTheUser = async (
    {
      username,
      password,
    }
  ) => {
    if (username || password) {
      // console.log('old', oldUsername.value)
      // console.log(username, password)
      const willChangeUser = totalData.value.find(item => item.username == oldUsername.value)
      // console.log(willChangeUser)
      const id = willChangeUser.id
      const type = willChangeUser.type
      // console.log(id, type)
      await changeUser(
        {
          username: username,
          type: type,
          password: password,
          id: id,
        }
      )
      showChangeUserByAdmin.value = !showChangeUserByAdmin.value
      const res = await getUser()
      // console.log(res.result)
      totalData.value = res.result
      tableData.value = totalData.value.slice(0, 5)
      // console.log('to', totalData.value)
      // console.log('ta', tableData.value)
      alert('修改用户成功')
    } else {
      alert('用户名和密码不能全为空')
    }
  }

  // 下线的逻辑
  const offlineTheUser = async (
    {
      username,
      type
    }
  ) => {
    console.log('下线')
    await offline(
      {
        username,
        type
      }
    )
    const res = await getUser()
    // console.log(res.result)
    totalData.value = res.result
    tableData.value = totalData.value.slice(0, 5)
  }

  // return { resetMap, manageUser,showManageUser }
  return {
    manageUser,
    showManageUser,
    showAddUserByAdmin,
    showAddUser,
    addUser,
    searchUser,
    tableData,
    totalData,
    handleCurrentChange,
    deleteTheUser,
    username,
    password,
    type,
    showChangeUserByAdmin,
    showChangeUser,
    changeUsername,
    changePassword,
    changeTheUser,
    offlineTheUser,
    page
  }
})
